<template>
  <div class="tesseract-ocr">
    <van-uploader v-model="fileList" :max-count="1" :after-read="afterReadFn" accept="image/*"></van-uploader>
<!--    <input ref="testInputRef" type="file" @change="testFn">-->
  </div>
</template>

<script>
import Tesseract from "tesseract.js";

export default {
  name: "tesseractOcr",
  data() {
    return {
      fileList: [],
    }
  },
  methods: {
    afterReadFn(file) {
      const that = this;
      (async () => {
        file.status = "uploading";
        file.message = "识别中...";
        //oem=1模式 用最新的4.0 best数据  必须用异步等待完成初始化
        const worker = await Tesseract.createWorker(["eng"], 1, {
          workerPath: "/tesseract/worker.min.js",
          corePath: "/tesseract",
          langPath: "/tesseract/lang-data"
        });
        await worker.setParameters({
          tessedit_char_whitelist: '0123456789.',    //成别撑数字
        });
        let reader = new FileReader();
        reader.onload =  async e => {
          const { data: { text } } = await worker.recognize(e.target.result);
          await worker.terminate();
          that.$emit("result", text);
          file.status = "done";
          file.message = "识别完成!";
        };
        reader.readAsDataURL(file.file);
      })();
    },

    /*testFn(e) {
      const that = this;
      let files = that.$refs.testInputRef.files;

      (async () => {
        //oem=1模式 用最新的4.0 best数据  必须用异步等待完成初始化
        const worker = await Tesseract.createWorker(["eng"], 1, {
          workerPath: "/tesseract/worker.min.js",
          corePath: "/tesseract",
          langPath: "/tesseract/lang-data"
        });

        let reader = new FileReader();
        reader.onload =  async e => {

          console.log("--->e", e);
          const { data: { text } } = await worker.recognize(e.target.result);
          await worker.terminate();

          that.$emit("result", text);
        };
        reader.readAsDataURL(files[0]);
      })();

      console.log(files)
    },*/
  }
}
</script>

<style lang="scss" scoped>
.tesseract-ocr {

}
</style>